<template>
  <div class="mainPopupConfig">
    <div class="mainButton">
      <div class="search">
        <!-- <Input placeholder="请输入...">
          <Icon type="ios-search" slot="suffix" />
        </Input> -->
        <Input
          search
          clearable
          enter-button
          size="large"
          placeholder="搜索服务"
          v-model="name"
          @on-search="queryService"
          @on-clear="clearSearch"
        />
      </div>
      <div class="button">
        <Button :disabled="btnState" @click="showPopupConfig">配置详情</Button>
      </div>
    </div>
    <Loading v-if="isLoading"></Loading>
    <div class="table">
      <Table
        highlight-row
        border
        :columns="columns5"
        :data="tableData"
        @on-current-change="getData"
        v-if="!isLoading"
      ></Table>
    </div>
    <div class="page" v-if="!isLoading">
      <Page
        :total="serviceItemsTotal"
        show-elevator
        show-total
        @on-change="pageParams"
        :disabled="isPageDisabled"
      />
    </div>
    <div class="filter" v-show="popupContentState"></div>
    <popupContent
      :url="contentUrl"
      :title="contentTitle"
      :imgUrl="contentImgUrl"
      :id="contentId"
      :desc="contentDesc"
      :popupConfig="popupMsg"
      v-if="popupContentState"
      @contentState="changeState"
    ></popupContent>
  </div>
</template>
<script>
import popupContent from "./PopupContent";
import Loading from "../Other/Loading";
export default {
  name: "popupConfig",
  components: {
    popupContent,
    Loading,
  },
  data() {
    return {
      columns5: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: " ",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "服务类型",
          key: "themeClass",
        },
        {
          title: "修改日期",
          key: "publishDate",
        },
      ],
      tableData: [],
      serviceItemsTotal: 0,
      contentTitle: "",
      contentImgUrl: "",
      contentDesc: "",
      contentId: 0,
      contentUrl: "",
      page: 1,
      size: 10,
      popupContentState: false,
      btnState: true,
      isLoading: true,
      isPageDisabled: false,
      name: "",
      popupMsg: [],
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.tableData.length = 0;
      this.axios
        .get("/service", { page: this.page, size: this.size })
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;

            this.serviceItemsTotal = res.data.total;
            this.isLoading = false;
          } else {
            this.$Message.info("当前无服务！");
            this.isLoading = false;
          }
        });
    },
    pageParams(page) {
      this.page = page;
      this.getTableData();
    },
    getData(e) {
      this.axios.get("/service/" + e.id).then((res) => {
        if (res.data.code == 200) {
          this.popupMsg = res.data.data.popupConfig;
          this.btnState = false;
          this.contentTitle = e.title;
          this.contentImgUrl = e.thumb;
          this.contentDesc = e.desc;
          this.contentId = e.id;
          this.contentUrl = e.url;
        } else {
          this.$Message.info("无法配置弹窗！");
        }
      });
    },
    showPopupConfig() {
      this.popupContentState = true;
    },
    queryService() {
      this.axios
        .get("/service", {
          params: {
            name: this.name,
            page: 1,
            size: 10,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.serviceItemsTotal = res.data.total;
          } else {
            this.$Message.info("未找到指定服务！");
          }
        });
      this.isPageDisabled = true;
    },
    clearSearch() {
      this.getTableData();
      this.isPageDisabled = false;
    },
    changeState(data) {
      this.popupContentState = false;
    },
  },
};
</script>
<style scoped>
.mainPopupConfig {
  width: 100%;
  height: 100%;
}
.search {
  height: 40px;
  width: 270px;
  float: left;
}
.button {
  width: 100px;
  height: 60px;
  float: right;
}
.mainButton {
  margin: 15px;
  height: 40px;
}
.table {
  width: 100%;
  padding: 15px;
}
.page {
  text-align: center;
}
.filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 1);
  opacity: 0.3566;
  z-index: 998;
}
</style>
